<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素 心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #ff0000;
				/* 自适应居中 */
				margin: 250px auto;
				transform: rotate(135deg);
				/* 透明度属性：属性值0~1范围值 */
				opacity: .5;
				/* 滤镜属性：光晕：下阴影 */
				filter: drop-shadow(0 0 100px #ff0000);
				/*动画属性:关键帧名称 过渡时间 过渡方式 无限循环*/
				animation: heart .8s linear infinite;
			}
			/* 伪类选择器：给元素附加上效果的选择器
			    语法：div:hover{}  当鼠标悬停到div上 实现的【样式】效果
				需求：鼠标悬停到中间心位置改成圆
				 选择器:before 在元素之前添加文本，通常与content: ""
				选择器:after 在元素之后添加文本, 通常与content: ""
			 */
			/* 伪类选择器div上方增加一个文本/画圆 */
			div:before{
				content: "";
				/* 显示属性
				 display: block;转成块级元素
				 display: inline;转成行级元素
				 display: none;元素消失
				 */
				display: block;
				
				width:200px;
				height: 200px;
				background-color: #ff0000;
				border-radius: 50%;
				/* 相对定位 */
				position: relative;
				left: -100px;
				
			}
			div:after{content:"";
			display: block;
				width: 200px;
				height: 200px;
				background-color: #ff0000;
				border-radius: 50%;
				position: relative;
				top: -100px;
			
			}
			
			/* -----------动画-------------------------- */
			/* 1.创建关键帧--手翻书 */
			@keyframes heart{
				/* 3个画面:①等比例出现，防止跳帧 ②缩小比例③放大比例*/
				0%{
					/*转换属性：缩放属性值   
					1.表示等比例  
					.8表示缩小0.8倍
					1.2表示放大1.2倍
					*/
					transform:rotate(135deg) scale(1);
				}
				30%{
					transform:rotate(135deg) scale(.8);
				}
				100%{
					transform:rotate(135deg) scale(1.2);
					}
			}
			
			
		</style>
	</head>
	<body>
		<!-- 画一颗心   html 一个元素-->
		<div></div>
		<!-- html5：元素的分类，按照元素的特点分为：
		          ① 块元素：可以设置高宽，独占一行，典型的块元素：div
				   ②行元素：不可以设置高宽，可以在一行内显示，典型行元素：span
				   文本内容属于行元素
				   ③行内块元素：可以设置高宽，可以在一行内显示，典型的行内块元素：img
		
		 -->
		 <audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>